Skip to content

[dialog] Honor explicit final focus on backdrop dismissal - #6248

Open
lfhwnqe wants to merge 1 commit into
mui:masterfrom
lfhwnqe:fix/dialog-explicit-final-focus-backdrop
Open

lfhwnqe wants to merge 1 commit into
mui:masterfrom
lfhwnqe:fix/dialog-explicit-final-focus-backdrop

Conversation

@lfhwnqe

@lfhwnqe lfhwnqe commented Nov 15, 2026

Copy link
Copy Markdown

After a modal dialog closes on a backdrop press in a browser that ignores focus({ preventScroll }), focus can fall back to document.body even when the app's finalFocus callback returns a specific element. In the reported scenario, this sends the screen reader back to the top of the page.

Honor an explicit focus target on this dismissal path. Keep the existing scroll protection when finalFocus resolves to the default behavior. The target the application explicitly supplies may scroll into view on browsers that ignore the option.

Fixes #6161.

To reproduce, render a modal Dialog with a backdrop and set Dialog.Popup finalFocus={() => continueButton.current}. Open from the trigger, then press the backdrop. On Base UI 1.9.0 (master at 315eba7), with React 19.3.1 and the browser behavior simulated by ignoring focus options, the dialog closes and document.activeElement is document.body. The same test passes after this change and the explicitly specified Continue button has focus. The control case where the callback returns true keeps the existing behavior.

Validation on Node 26.11.1:

  • New regression passed after the fix; before the fix the explicit case failed and the default control passed.
  • Dialog and focus manager suites: 333 passed in jsdom and 388 passed in Chromium (Chrome Headless Shell 158.0.8127.18).
  • Workspace type check, repository ESLint and lint rule tests, Stylelint, Prettier, package build, and git diff --check passed.
  • The test simulates unavailable focus options. No physical Android device was used.

AI assistance disclosure: Codex helped reproduce the report, implement the patch and regression, and run the checks above.

@pkg-pr-new

pkg-pr-new Bot commented Nov 15, 2026

Copy link
Copy Markdown

commit: bed0c37

@code-infra-dashboard

code-infra-dashboard Bot commented Nov 15, 2026 •

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+20B(0.00%) 🔺+27B(+0.02%)

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 3m 58s · details


Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Nov 15, 2026

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit bed0c37
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6af9965e501040ad4cbfbefa
😎 Deploy Preview https://deploy-preview-6248--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[dialog] Backdrop press on a browser without focus({ preventScroll }) drops focus to <body>, ignoring finalFocus

1 participant